<template>
	<view class="container">
		<u-navbar placeholder @rightClick="search" bg-color="#033787">
			<view slot="center" class="title" style="color: #fff;">{{$t('order.index')}}</view>
			<view slot="right">
				<u-icon name="search" size="36" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<u-sticky class="tab-box" offset-top="88rpx">
			<view class="tab _card ">
				<u-tabs :current="tab" :list="tabs" line-color="#033787" line-height="6" line-width="24"
					:active-style="{color: '#033787'}"></u-tabs>
			</view>
		</u-sticky>

		<view class="list">
			<view class="_card order" @click="orderInfo">
				<view class="title">
					{{$t('order.info.sn')}}: 587291342
					<view class="status">待配送</view>
				</view>
				<view class="goods">
					<view v-for="(item, index) in goodsList" :key="index" class="item _card">
						<u-image :src="item.pic" radius="16rpx" show-loading width="168rpx" height="168rpx"></u-image>
						<view class="info">
							<view class="name">
								<view class="u-line-1">{{item.name}}</view>
								<view class="price">$28.90</view>
							</view>
							<view class="tag">標準/冰糖雪梨軟包/自己拌</view>
							<view class="parameter">
								<text>{{$t('goods.energy')}}: {{item.energy}}</text>
								<text>x 12</text>
							</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="price">
						{{$t('order.info.disbursements')}}: $ 10086.00
					</view>
					<view class="btn-group">
						<view class="btn">{{$t('order.cancel')}}</view>
						<view class="btn warn">{{$t('order.reminder')}}</view>
						<view class="btn warn-full">{{$t('order.go-pay')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tab: 0,
				goodsList: [{
						id: 1,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '這是早餐',
						sales: 88,
						energy: 108,
						tags: ['好吃', '配送快'],
						price: 10.86
					},
					{
						id: 2,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '這是午餐',
						sales: 88,
						energy: 108,
						tags: ['肥牛不错'],
						price: 10.86
					}
				]
			}
		},
		computed: {
			tabs() {
				return [{
						id: -1,
						name: this.$t('c.all')
					},
					{
						id: 0,
						name: this.$t('order.status.wait-pay')
					},
					{
						id: 1,
						name: this.$t('order.status.wait')
					},
					{
						id: 2,
						name: this.$t('order.status.wait-delivery')
					},
					{
						id: 3,
						name: this.$t('order.status.delivery')
					},
					{
						id: 4,
						name: this.$t('order.status.comment')
					}
				]
			}
		},
		onShow() {
			const param = uni.getStorageSync('orderParamTemp')
			if (param) {
				uni.removeStorageSync('orderParamTemp')
				let tabItem = this.tabs.find(val => {
					return val.id == param.status
				})
				if (tabItem) {
					this.tab = this.tabs.indexOf(tabItem)
				}
			}
		},
		methods: {
			search() {
				uni.navigateTo({
					url: '/pages/order/search'
				})
			},
			orderInfo(item) {
				uni.navigateTo({
					url: '/pages/order/info?id='
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-box {
		padding-top: 24rpx;
		background-color: #F2F4F6 !important;

		.tab {
			margin-top: 0;
			display: inline-block;
			padding: 0;
		}
	}

	.list {
		.order {
			margin-top: 24rpx;
			padding: 0;

			.title {
				padding: 24rpx;
				border-bottom: 1rpx solid #E6EAEE;
				font-size: 26rpx;
				font-weight: 600;
				display: flex;
				justify-content: space-between;

				.status {
					color: #E35525;
				}
			}

			.goods {
				padding: 24rpx;

				.item:not(:first-child) {
					border-top: 1rpx solid #E6EAEE;
					padding-top: 16rpx;
				}

				.item {
					display: flex;
					height: 160rpx;
					padding: 0;
					margin: 0;
					margin-bottom: 24rpx;

					.info {
						width: calc(100% - 108rpx);
						margin-left: 24rpx;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						width: 100%;

						.name {
							width: 100%;
							font-size: 30rpx;
							color: #0C1626;
							font-weight: 600;
							display: flex;
							justify-content: space-between;
							
							.price {
								color: #7C8493;
							}
						}

						.parameter {
							width: 100%;
							font-size: 22rpx;
							color: #B9BFCB;
							display: flex;
							justify-content: space-between;
						}

						.tag {
							display: inline;
							font-size: 22rpx;
							border-radius: 4rpx;
							padding: 12rpx;
							color: rgba(3, 55, 135, 1);
							border: 1rpx solid rgba(3, 55, 135, 1);
							background-color: rgba(3, 55, 135, 0.1);
						}
					}
				}
			}

			.footer {
				padding: 24rpx;
				border-top: 1rpx solid #E6EAEE;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;

				.price {
					font-size: 30rpx;
					color: #E35525;
				}

				.btn-group {
					display: flex;
					justify-content: flex-end;

					.btn:not(:first-child) {
						margin-left: 16rpx;
					}

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 24rpx;
						padding: 18rpx 36rpx;
						border-radius: 12rpx;
						border: 1rpx solid rgba(3, 55, 135, 1);
						background-color: rgba(3, 55, 135, 0.1);
						font-size: 26	rpx;
						color: rgba(3, 55, 135, 1);
					}

					.warn {
						border: 1rpx solid rgba(227, 85, 37, 1);
						background-color: rgba(227, 85, 37, 0.1);
						color: rgba(227, 85, 37, 1);
					}

					.warn-full {
						border: 1rpx solid rgba(227, 85, 37, 1);
						background-color: rgba(227, 85, 37, 1);
						color: #fff;
					}
				}
			}
		}
	}
</style>